import { View, Image, Text } from "@tarojs/components"
import { TBar, TBlock, TPage } from "../../../shared/ui"
import topBg from '../../../theme/quotes/quote-top-bg.png'
import { addCommasToNumber, getFirstLetterUpperCase } from "../../../utils"
import { IconFont } from "../../../theme/index"
import * as Rest from '../../service'
import follow1 from '../../../theme/follow/follow1.png'
import icon1 from '../../../theme/follow/follow1icon.png'
import follow2 from '../../../theme/follow/follow2.png'
import icon2 from '../../../theme/follow/follow2icon.png'
import follow3 from '../../../theme/follow/follow3.png'
import wallet from '../../../theme/follow/wallet.png'
import follow4 from '../../../theme/follow/follow4.png'
import icon3 from '../../../theme/follow/icon1.png'
import { useDidHide, useDidShow } from "@tarojs/taro"
import { useState } from "react"
const Main = () => {
  const [show, setShow] = useState(true)
  useDidShow(() => {
    setShow(() => { return true })
  })
  useDidHide(() => {
    console.log('hide')
    setShow(() => { return false })
  })
  return show && <TPage>

    <TBar title={'跟买'} />

    <TBlock>
      <View className="w-full h-[162px] bg-contain px-[24px] pt-[24px] py-[12px] mt-[20px] flex flex-col justify-between" style={{ background: `url(${topBg})`, backgroundSize: '100% 100%' }}>
        <View className="w-full h-[50px] flex justify-between items-center">
          <View className='text-[36px] text-[#0287F7]'>USDT</View>
          <View className="flex items-center">
            <View className="text-[24px] text-[#ffffff]">余额：</View>
            <View>{`$${addCommasToNumber(5230.25)}`}</View>
            <View className="px-[8px]">
              <IconFont name='refresh' size={40} color='#0287F7' />
            </View>
          </View>
        </View>
        <View className="w-full h-[50px] flex justify-between items-center">
          <View className='text-[28px] text-[#ffffff] flex items-center'>
            <View className="px-[8px] ">
              <IconFont name='today' size={40} color='#ffffff' />
            </View>
            <View>跟买锁定</View>
          </View>
          <View className="flex items-center">
            <View>{`$${addCommasToNumber(5230.25)}`}</View>
          </View>
        </View>
      </View>
    </TBlock>
    <TBlock>
      <View className="w-full h-[68px] bg-[#191933] rounded-[8px] mt-[20px] px-[16px] flex items-center">
        <View className="px-[8px] ">
          <IconFont name='tanhao' size={28} color='#ffffff' />
        </View>
        <View className="flex-1 text-[24px] text-[#ffffff] truncate text-ellipsis">
          跟买操作只能使用USDT币种,如果币种余额不足,请转换
        </View>
        <View className="px-[8px] ">
          <IconFont name='transform' size={28} color='#ffffff' />
        </View>
      </View>
    </TBlock>

    <TBlock classNames="mt-[8px]">
      <View className="my-[30px] grid grid-cols-2 gap-[20px] justify-between ">
        <View className="w-full h-[120px] bg-cover pt-[18px] pb-[14px] pl-[36px] flex items-center" style={{ background: `url(${follow1})`, backgroundSize: '100% 100%' }}>
          <Image src={icon1} className="w-[86px] h-[88px]" />
          <View className="flex flex-col justify-center flex-1 h-full px-[16px]">
            <View className="text-[36px] text-[#ffffff]" style={{ fontFamily: 'PangMenZhengDao' }}>明星导师</View>
            <View className="text-[26px] text-[#ffffff] ">李伟敏（其它）</View>
          </View>
        </View>
        <View className="w-full h-[120px] bg-cover pl-[48px] pt-[10px] pb-[18px] flex items-center" style={{ background: `url(${follow2})`, backgroundSize: '100% 100%' }}>
          <Image src={icon2} className="w-[98px] h-[94px]" />
          <View className="flex flex-col justify-center flex-1 h-full px-[16px]">
            <View className="text-[36px] text-[#ffffff]" style={{ fontFamily: 'PangMenZhengDao' }}>规则说明</View>
          </View>
        </View>

      </View>
    </TBlock>

    <TBlock>
      <View className="w-full h-[100px] bg-[#191933] rounded-[16px] pl-[38px] flex">
        <View className="pt-[20px]">
          <Image src={wallet} className="w-[66px] h-[64px]" />
        </View>
        <View className="flex-1 h-full pl-[10px] flex justify-between">
          <View className="h-full w-max text-[28px] flex items-center">
            近期收益
          </View>
          <View className="h-full text-[36px] font-medium pt-[22px] pr-[30px]">{`$${addCommasToNumber(5230.25)}`}</View>
        </View>
      </View>
    </TBlock>

    <TBlock classNames="mt-[30px]">
      <View className="w-full h-[214px] bg-cover pt-[48px] pb-[56px] flex" style={{ background: `url(${follow3})`, backgroundSize: "100% 100%" }}>
        <View className="w-[50%] h-full flex flex-col justify-between items-center">
          <View className="text-[28px] text-[#ffffff]">今日收益</View>
          <View className="text-[36px] text-[#ffffff] font-medium">
            {`$${addCommasToNumber(5230.25)}`}
          </View>
        </View>
        <View className="w-[1px] h-full border border-dashed border-[#111439] border-l-0 border-y-0"></View>
        <View className="w-[50%] h-full flex flex-col justify-between items-center">
          <View className="text-[28px] text-[#ffffff]">昨日收益</View>
          <View className="text-[36px] text-[#ffffff] font-medium">
            {`$${addCommasToNumber(5230.25)}`}
          </View>
        </View>
      </View>
    </TBlock>

    <TBlock classNames="mt-[42px]">
      <View className="w-full h-[98px] px-[30px] flex items-center  bg-cover" style={{ background: `url(${follow4})`, backgroundSize: "100% 100%" }}>
        <Image src={icon3} className="w-[44px] h-[44px]" />
        <View className="flex-1 flex items-center justify-between pl-[12px]">
          <View className="text-[32px]">团队</View>
          <View>
            <IconFont color='#06E4D3' name="fly" size={40} />
          </View>
        </View>
      </View>
    </TBlock>
  </TPage >
}

export default Main
